<template>
    <div class="pie-container">
        <Echart
            id="leftCenter"
            :options="options"
            class="left_center_inner"
            ref="charts"
        />
        <div class="titletext" v-if="countUserNumData.length == 0">
            暂无数据
        </div>
    </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
import { stats } from "@/api/system";
import { removeNullUndefined } from "@/utils/index.js";

export default {
    props: {
        code: {
            type: String,
            default() {
                return "";
            },
        },
    },
    components: {
        Echart,
    },
    data() {
        return {
            options: {},
            countUserNumData: [],
        };
    },

    watch: {
        code: {
            handler(val) {
                let code = val ? val.substr(0, val.length - 13) : "";
                this.getData(code);
            },
            deep: true, //对象内部的属性监听，也叫深度监听
            immediate: true,
        },
    },

    methods: {
        getData(code) {
            stats("/alarm/top", "get", {
                ...removeNullUndefined({
                    regionCode: code == "china" ? "" : code,
                }),
            })
                .then((res) => {
                    this.countUserNumData = res.data.map((p) => {
                        return {
                            name: p.name,
                            value: p.count,
                        };
                    });
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.init();
                    });
                });
        },

        init() {
            let colors = ["#ECA444", "#33A1DB", "#56B557"];
            this.options = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b} :<br\/> {c}",
                    textStyle: {
                        fontSize: 18,
                    },
                },

                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        color: colors,
                        data: this.countUserNumData,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 16,
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
        },
    },
};
</script>
<style lang="scss" scoped>
.pie-container {
    width: 100%;
    height: 100%;
}
.titletext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
</style>
